<!DOCTYPE html>
<html>
<head>
	<title>watch practice</title>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id='conversion'>
		<input type="input" name="" v-model='kilometers' ></input> kilometers </br>
		<input type="input" name="" v-model='meters' ></input> meters </br>
		<span id ='change'> &nbsp; </span>
	</div>

	<script type="text/javascript">
		var conversion = new Vue({
			el:'#conversion',
			data:{
				'kilometers':0,
				'meters':0,
				'oldV':0,
				'newV':0
			},
			watch:{
				// to watch if the value have been changed
				kilometers:function(val){
					this.kilometers = val;
					this.meters = val * 1000;
				},
				meters:function(val){
					this.kilometers = val/1000;
					this.meters = val;
				}
			}
		});
		conversion.$watch('kilometers',function(nval,oval){
			document.getElementById("change").innerHTML = '修改后值为: ' + nval + ' 修改前值为: ' + oval;
		})

	</script>

	<div id = 'watch-tag'>
		this demo watch object property
		<input type="" name="" v-model='childre.name'>
	</div>

	<script type="text/javascript">
		
		var vm = new Vue({
			el:'#watch-tag',
			data:{
				"childre":{
					"age":13,
					"name":"Amy",
					"sex":"woman"

				},
				count:3
			},
			watch:{
				'childre.name':function(val){
					console.log('change:' + val);
				}
			}
		})

	</script>

</body>
</html>